<template>
    <div>
        <toubu></toubu>

        <div v-if="$store.state.messageList" class="better_scroll_wrapper" >
            <ul>
                <li v-for="(item,index) in $store.state.messageList" :key="item.id" class="userlist" @click.stop="to_chat(item.toid)">
                    <div class="touxiang">
                        <img src="http://admin.xukunqi.com/public/static/headimage.png" width="43" height="43">
                    </div>
                    <div class="name_and_username">
                        <div class="name">
                            {{item.toName}}
                        </div>
                        <div class="username">
                            {{item.last_message}}
                        </div>
                    </div>
                </li>
            </ul>

            <div class="block">

            </div>

        </div>

        <div v-else class="no_message">
                消息列表为空
        </div>

        <dibu></dibu>
    </div>
</template>

<script>
    import toubu from '@/components/toubu';
    import dibu from '@/components/dibu';
    import Cookies from 'js-cookie'

    export default {
        name: "message",

        components:{
            toubu,
            dibu,
        },

        data(){
          return{
          }
        },

        mounted() {

        },

        methods:{
            to_chat(id){
                this.$router.push({path:"/center/chat",query:{id:id}});
            },
        }
    }
</script>

<style scoped>

    .no_message{width: 100%;text-align: center;margin-top: 200px;color: #bfbfbf;}

    .userlist{height: 62px;width: calc(100% - 34px);margin: 15px auto;border-bottom: solid 1px #ececec;display: flex;flex-direction: row;position: relative;background-color: pink;border-radius: 15px;}
    .touxiang{width: 43px;height: 43px;margin-top: 10px;margin-left: 5px;}
    .name_and_username{margin-left: 10px;}
    .name{font-size: 15px;line-height: 15px;margin-top: 15px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 7px;}

    .block{width: 100%;height: 80px;}
</style>